<template>
	<view class="topic">
		<view class="topic_header">
			<text class="active">{{name}}</text> 题目列表
		</view>
		<view class="topic_list">
			<view class="opt" v-for="(item,index) in topics">
				<navigator class="link" :url="`/pages/topic_detail/topic_detail?id=${item._id}`">
					{{item.question}}
				</navigator>
			</view>
		</view>
		<view class="msg" v-if="topics.length == 0">
			没有 {{name}} 的题目~~
		</view>
	</view>
</template>

<script>
	// 导入题目列表集合对象
	import { topicsCollection } from '../../common/db/index.js';

	export default {
		// 定义数据
		data(){
			return {
				topics: [],
				name: "",
				total: 0,
				page: 1,
				size: 10
			}
		},
		// 程序加载完成会执行的回调函数
		onLoad(option){
			//初始化
			if(option.name) {
				this.name = option.name;
				// this.listTopic(1,5,option.name);
				// 默认获取第一页数据
				this.listTopic(this.page, this.size, option.name);
			}
		},
		
		// 编写相应的方法
		methods: {
			// 可以根据传递的页码和数量获取对应的数据
			async listTopic(page,size, name){
				// 检查参数
				// console.log(page,size, name);
				uni.showLoading({
					title:"正在加载..."
				})
				let pageSize = size || 5; // 每页显示条数，默认为10
				let skip = (page - 1) * pageSize; // 计算跳过的记录数
				// let regex = new RegExp(keyword, 'i'); // 'i'表示不区分大小写
				// 使用云数据库
				await topicsCollection
				// .where({question: regex})// 条件查询（关键字查询）
				.where({name: name})// 条件查询（关键字查询）
				.skip(skip) // 跳过指定数量的文档
				.limit(pageSize) // 限制返回文档的数量
				.get()
				.then(res => {
					// console.log(1111,res);
					// 获取查询结果
					let result = res.result;
					// 赋值
					this.topics = result.data;
					
					// 把获取的题目列表储存在本地
					if(result.data){
						uni.setStorageSync("TOPIC_LIST",JSON.stringify(result.data));
					}
					
				}).catch(err => console.log(err))
				// 隐藏加载提示
				uni.hideLoading();
				// 这张表总数量多少?
				await topicsCollection.count().then(res=> {
					// console.log("总:",res);
					let result = res.result;
					this.total = result.total;//总数量
				}).catch(err => console.log(err))
			}
		}
	}
</script>

<style lang="scss">
.topic {
	padding: 20rpx 30rpx;
	.topic_header {
		padding: 30rpx 0rpx;
		font-weight: bold;
		font-size: 16px;
		.active {
			color: deepskyblue;
			font-size: 20px;
		}
	}
	.topic_list {
		.opt {
			.link {
				display: block;
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 1px dashed #ccc;
				background-color: transparent;
				margin-bottom: 10rpx;
				padding-left: 20rpx;
			}
		}
	}
	.msg {
		padding: 50rpx 0rpx;
		color: #666;
		text-align: center;
	}
}
</style>
